<template>
	<view class="personal-data">
		<view class="wrapper">
			<view class="wrapList">
				<view class="item acea-row row-between-wrapper on">
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue" @tap="chooseImage">
							<div class="pictrue">
								<img :src="avatar" />
							</div>
							<image src="@/static/images/alter.png" class="alter" />
						</view>
						<view class="text">
							<view class="name line1">{{ userInfo.nickname }}</view>
							<view class="phone">
								绑定手机号：
								<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
								<text v-else>未绑定</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item acea-row row-between-wrapper">
				<view>昵称</view>
				<view class="input">
					<input type="text" v-model="userInfo.nickname" />
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>ID号</view>
				<view class="input acea-row row-between-wrapper">
					<input type="text" :value="userInfo.uid" disabled class="id" />
					<text class="iconfont icon-suozi"></text>
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>手机号</view>
				<view class="input">
					<input type="text" v-if="userInfo.phone!=null" v-model="userInfo.phone" />
					<input type="text" v-else value="未绑定" disabled class="id" />
				</view>
			</view>
			<!--
        <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
          <view>密码</view>
          <view class="input acea-row row-between-wrapper">
            <text>点击修改密码</text>
            <text class="iconfont icon-suozi"></text>
          </view>
        </view>
      -->
		</view>
		<view class="modifyBnt bg-color-red" @click="submit">保存修改</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="logOut cart-color acea-row row-center-wrapper" @click="logout">退出登录</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		trim,
		isWeixin,
		chooseImage
	} from "@/utils";
	import {
		VUE_APP_API_URL
	} from "@/config";
	import {
		postUserEdit,
		getLogout,
		switchH5Login,
		getUserInfo,
	} from "@/api/user";
	import cookie from "@/utils/store/cookie";
	import store from "@//store";
	import dayjs from "dayjs";

	export default {
		name: "PersonalData",
		components: {
			// VueCoreImageUpload
		},
		data: function() {
			return {
				avatar: "",
				isWeixin: false,
				currentAccounts: 0,
				switchUserInfo: [],
				userIndex: 0,
			};
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.avatar = this.userInfo.avatar;
			this.isWeixin = isWeixin();
			this.getUserInfo();
		},
		methods: {
			goChangePassword() {
				this.$yrouter.push("/pages/user/ChangePassword/index");
			},
			switchAccounts: function(index) {
				let that = this;
				this.userIndex = index;
				let userInfo = this.switchUserInfo[this.userIndex];
				if (this.switchUserInfo.length <= 1) return true;
				if (userInfo === undefined) {
					uni.showToast({
						title: "切换的账号不存在",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if (userInfo.user_type === "h5") {
					switchH5Login()
						.then(({
							data
						}) => {
							uni.hideLoading();
							const expires_time = dayjs(data.expires_time);
							store.commit("login", data.token, expires_time);
							that.$emit("changeswitch", false);
							location.reload();
						})
						.catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: err.msg || err.response.data.msg || err.response.data.message,
								icon: "none",
								duration: 2000,
							});
						});
				} else {
					cookie.set("loginType", "wechat", 60);
					uni.hideLoading();
					this.$store.commit("logout");
					this.$emit("changeswitch", false);
				}
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then((res) => {
					// let switchUserInfo = res.data.switchUserInfo;
					// for (let i = 0; i < switchUserInfo.length; i++) {
					//   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
					//   if (
					//     !that.isWeixin &&
					//     switchUserInfo[i].user_type != "h5" &&
					//     switchUserInfo[i].phone === ""
					//   )
					//     switchUserInfo.splice(i, 1);
					// }
					// that.$set(this, "switchUserInfo", switchUserInfo);
				});
			},
			chooseImage() {
				chooseImage((img) => {
					console.log(img);
					this.avatar = img;
				});
			},

			submit: function() {
				let userInfo = this.userInfo;
        let phonere = /[1][3-9][0-9]{9}$/

        let isphone=phonere.test(this.userInfo.phone)
        if(!isphone){
          uni.showToast({
			  title: "手机号码不正确！",
			  icon: "none",
			  duration: 1000,
		  })
          return
        }

				postUserEdit({
					nickname: trim(this.userInfo.nickname),
					avatar: this.avatar,
					phone: trim(this.userInfo.phone),
				}).then(
					(res) => {
						this.$store.dispatch("userInfo", true);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
						});
						this.$yrouter.back();
					},
					(err) => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000,
						});
					}
				);
			},
			logout: function() {
				uni.showModal({
					title: "提示",
					content: "确认退出登录?",
					success: (res) => {
						if (res.confirm) {
							getLogout()
								.then((res) => {
									this.$store.commit("logout");
									this.$yrouter.replace({
										path: "/pages/user/Login/index",
										query: {},
									});
								})
								.catch((err) => {});
						} else if (res.cancel) {
							// console.log("用户点击取消");
						}
					},
				});
			},
		},
	};
</script>
